<script setup lang="ts">

import {RiCompassDiscoverFill} from "vue-icons-plus/ri";
import {AiOutlineHome} from "vue-icons-plus/ai";
import {BsFileEarmarkText, BsPerson} from "vue-icons-plus/bs";
import {MyApi, type AddUserRO, type LoginRO} from "@/api";
import {ElMessage} from "element-plus";

const registerData = ref<AddUserRO>({
  code: '普通用户',
  name: '',
  password: '',
})
const api = new MyApi()
const router = useRouter()
const repeat_password = ref('')
const register = () => {
  if (registerData.value.password !== repeat_password.value) {
    ElMessage.error('两次密码不一致')
    return
  }
  api.addNewUser(registerData.value).then((res) => {
      ElMessage.success('注册成功')
  }).catch((err) => {
    ElMessage.error(err.response.data.message)
  })
  router.back()
}

</script>


<template>
  <div class="container h-full w-full">
    <header class="w-full h-12vw bg-#0097FF flex items-center justify-center pos-fixed left-0 top-0 z-100">
      <p class="color-#fff text-4.8vw select-none">用户注册</p>
    </header>
    <ul class="form-box w-full pos-fixed mt-12vw">
      <li>
        <div class="title">手机号码：</div>
        <div class="content">
          <input v-model="registerData.name" type="text" placeholder="手机号码">
        </div>
      </li>
      <li>
        <div class="title">密码：</div>
        <div class="content">
          <input v-model="registerData.password" type="password" placeholder="密码">
        </div>
      </li>
      <li>
        <div class="title">确认密码：</div>
        <div class="content">
          <input v-model="repeat_password" type="password" placeholder="确认密码">
        </div>
      </li>
      <li>
        <div class="title">性别：</div>
        <div class="content" style="font-size: 3vw;">
          <input type="radio" name="sex" value="男" checked style="width: 6vw;height:2.5vw;">男
          <input type="radio" name="sex" value="女" style="width: 6vw;height:2.5vw;">女
        </div>
      </li>
      <li>
        <ElButton @click="register" type="primary" style="background: #EEE; height:10vw;font-size:3.8vw; color: #333;border-radius: 4px;border: none;outline: none" class="w-full">注册</ElButton>
      </li>
    </ul>
    <ul class="footer w-full h-14vw flex items-center justify-around pos-fixed left-0 bottom-0 border-solid border-t-1px border-#DDD">
      <li>
        <AiOutlineHome></AiOutlineHome>
        <p>首页</p>
      </li>
      <li>
        <RiCompassDiscoverFill></RiCompassDiscoverFill>
        <p>发现</p>
      </li>
      <li>
        <BsFileEarmarkText></BsFileEarmarkText>
        <p>订单</p>
      </li>
      <li>
        <BsPerson></BsPerson>
        <p>我的</p>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.container .form-box li{
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;

  display: flex;
  align-items: center;
  user-select: none;
}
.container .form-box li .title{
  flex: 0 0 18vw;
  font-size: 3vw;
  font-weight: 700;
  color: #666;
}
.container .form-box li .content{
  flex: 1;
}
.container .form-box li .content input{
  border: none;
  outline: none;
  width: 100%;
  height: 4vw;
  font-size: 3vw;
}
.footer li{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: #999;
  user-select: none;
  cursor: pointer;
}
.footer li p{
  font-size: 2.8vw;
}
</style>